<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>蓝学网</title>
	<link rel="icon" type="image/x-icon" href="../兰/images/logo.png">
	<link rel="stylesheet" href="font.css">
	<link rel="stylesheet" href="hcj.css">
</head>

<body>
	<style>
		/* 标题 */
		.title {
			display: flex;
			width: 100%;
			height: 50px;
			background-color: rgb(200, 225, 225);
			margin: 0px;

		}

		.title>ul {
			margin-left: 40%;
			display: flex;
		}

		.title>ul>li {
			margin: auto;
			margin-left: 50px;
		}

		.title>img {
			width: 41px;
			height: 41px;
			margin-left: 23%;
			margin-top: 6px;

		}

		.title>input {
			border-radius: 25px/50px;
			height: 20px;
			margin-left: 200px;
			position: absolute;
			right: 45%;
			top: 15px;
		}

		#searchButton {
			margin-right: 3px;
			top: 13px;
			width: 18px;
			height: 18px;
			position: absolute;
			right: 45%;
			cursor: pointer;
		}

		/* 导航栏 */
		.nav {
			width: 100%;
			height: 60px;
			background-color: rgb(111, 187, 219);
			overflow: hidden;

		}

		.nav>ul {
			display: flex;
			height: 60px;
			margin-left: 30%;
			padding-left: 0px;
			margin-top: 0px;
		}

		.nav>ul>li {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 7%;
			text-align: center;

		}

		.nav>ul>li>a {
			font-size: 20px;
			color: black;
			font-family: "华文新魏";
		}

		.nav>ul>li:hover {
			background-color: rgba(198, 224, 215, 0.573);
		}

		.qr {
			display: flex;
			margin-right: 10px;
		}

		.qr:hover .qr2 {
			display: block;
		}

		.qr2 {
			margin-top: 30px;
			top: 100%;
			right: 40%;
			position: absolute;
			width: 120px;
			height: 120px;
			margin-left: 10px;
			display: none;
			border: 10px white solid;
		}

		.title>ul>li>a,
		.deng>li>a {
			color: black;
		}




		/* 登录和注册盒子 */
		.deng {
			display: flex;
			margin-top: 20px;
			position: absolute;
			right: 5%;
		}

		.deng li {
			margin-left: 20px;
		}
	</style>



	<div>
		<!-- logo名字 -->
		<!-- 搜索栏(含js) -->
		<!-- 小组信息 -->
		<div class="title">
			<img src="../兰/images/logo.png" alt="">
			<input id="searchInput" placeholder="请输入关键词" type="text">
			<img id="searchButton" src="../兰/images/搜索图标.png" alt="">
			<ul>
				<li><a href="../兰/小组.html">小组</a></li>
				<li><a href="https://www.bilibili.com/video/BV1SJhVexEeg/?vd_source=6f4b3c43be3dc4f105a985362d1dce81">视频</a></li>
				<li><a href="https://gitee.com/lhuilan/final-group-task/tree/main/">仓库</a></li>
			</ul>
		</div>
	</div>

	<!-- 导航栏 -->
	<div>
		<!-- 主菜单 -->
		<div class="nav">
			<ul>
				<!-- 导航栏中 -->
				<!-- 导航栏的颜色尽量和logo颜色搭配 -->
				<!-- 鼠标悬停在"首页、HTML、CSS、JavaScript、Photoshop、Photography"时有子菜单 -->
				<li><a href="../index首页.html">首页</a></li>
				<li class="item item1"><a href="./hcj.html">Web前端</a>
				<li><a href="../瑜-ps/a-ps.html">Photoshop</a></li>
				<li><a href="../兰/摄影.html">Photography</a></li>
				<div class="deng">
					<!-- 导航栏右 -->
					<li class="qr">
						<!-- 鼠标悬停时下方出现二维码 -->
						<a href="">
							<span>客户端下载</span>
						</a>
						<!-- 二维码 -->
						<div>
							<img class="qr2" src="../兰/images/csdn二维码.png" alt="">
						</div>
					</li>
					<!-- (含js) -->
					<li><a href="../兰/登录.html" target="_blank">登录 ||</a></li>
					<li><a href="../兰/注册.html" target="_blank">&nbsp;注册</a></li>
				</div>
			</ul>
		</div>


		<!-- 左侧导航栏 -->
		<div class="aside-nav">
			<!-- 导航标题 -->
			<div class="nav-title">
				Web前端
			</div>
			<!--  导航列表  -->
			<ul class="nav-list">
				<li class="item">
					<!-- 父导航 -->
					<div class="parentNav">
						<i class="iconfont icon-gengduo"></i>
						<span>html</span>
						<i class="iconfont icon-xiala"></i>
					</div>
					<!-- 子导航 -->
					<ul class="subNav">
						<li class="menu-item">
							<a href="#">了解课程</a>
						</li>
						<li class="menu-item">
							<a href="#">安装和熟悉开发环境</a>
						</li>
						<li class="menu-item">
							<a href="#">制作第一张网页</a>
						</li>
						<li class="menu-item">
							<a href="#">制作第二张网页</a>
						</li>
						<li class="menu-item">
							<a href="#">个人简历网页制作</a>
						</li>
						<li class="menu-item">
							<a href="#">我的有声像册</a>
						</li>
						<li class="menu-item">
							<a href="#">学生成绩表</a>
						</li>
						<li class="menu-item">
							<a href="#">使用表单</a>
						</li>
						<li class="menu-item">
							<a href="#">拓展视野之html前世今生</a>
						</li>
					</ul>
				</li>
				<li class="item">
					<!-- 父导航 -->
					<div class="parentNav">
						<i class="iconfont icon-gengduo"></i>
						<span>css</span>
						<i class="iconfont icon-xiala"></i>
					</div>
					<!-- 子导航 -->
					<ul class="subNav">
						<li class="menu-item">
							<a href="#">快速了解选择器和盒子模型</a>
						</li>
						<li class="menu-item">
							<a href="#">格式化文本</a>
						</li>
						<li class="menu-item">
							<a href="#">设置颜色和背景</a>
						</li>
						<li class="menu-item">
							<a href="#">制作奖状</a>
						</li>
						<li class="menu-item">
							<a href="#">导航菜单制作</a>
						</li>
						<li class="menu-item">
							<a href="#">浮动及定位</a>
						</li>
						<li class="menu-item">
							<a href="#">图标字体与购物车</a>
						</li>
						<li class="menu-item">
							<a href="#">CSS动画--动感立方体</a>
						</li>
						<li class="menu-item">
							<a href="#">CSS综合任务2---定位与动画</a>
						</li>
						<li class="menu-item">
							<a href="#">主流布局--flex布局</a>
						</li>
						<li class="menu-item">
							<a href="#">响应式布局</a>
						</li>
					</ul>
				</li>
				<li class="item">
					<!-- 父导航 -->
					<div class="parentNav">
						<i class="iconfont icon-gengduo"></i>
						<span>js</span>
						<i class="iconfont icon-xiala"></i>
					</div>
					<!-- 子导航 -->
					<ul class="subNav">
						<li class="menu-item">
							<a href="#">JavaScript入门</a>
						</li>
						<li class="menu-item">
							<a href="#">轮播图与待办列表</a>
						</li>
						<li class="menu-item">
							<a href="#">时钟与计算器</a>
						</li>
						<li class="menu-item">
							<a href="#">天气预报</a>
						</li>
						<li class="menu-item">
							<a href="#">网页小游戏</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<!-- 右侧部分 -->
		<div class="main-wrapper">
			<!-- 1 -->
			<div class="list" id="list1">
				<li>
					<h1>了解课程</h1>
					<h3>
						简介： 观看教学视频，查阅相关资料，了解课程学习内容和方法等。<br>
						目标：了解本课程的设计理念和特色，学什么，怎么学，最终可掌握哪些知识和能力，提升学习本课程的热情。<br>
					</h3>
					<!-- 视频,要做鼠标悬停效果,img里有播放键 -->
					<div class="img3">
						<a href="https://www.bilibili.com/video/BV1yy4y1Y7Ky/?vd_source=86a7cb754b792201564a527f2ed37f0f"
							class="item1">
							<img src="./image/网页设计技术.jpg" alt="">
						</a>
						<a href="https://www.bilibili.com/video/BV1yy4y1Y7Ky/?vd_source=86a7cb754b792201564a527f2ed37f0f"
							class="bo1"></a>
					</div>
					<div class="img4">
						<a href="https://www.bilibili.com/video/BV1oa4y1k7eK/?vd_source=86a7cb754b792201564a527f2ed37f0f"
							class="item2">
							<img src="./image/前端应用参考图.jpg" alt="">
						</a>
						<a href="https://www.bilibili.com/video/BV1oa4y1k7eK/?vd_source=86a7cb754b792201564a527f2ed37f0f"
							class="bo2"></a>
					</div>
					<div class="text">
						<font size="4">
							HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。<br>
							HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。<br>
							除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。<br>
							“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。<br>
							HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如head 等等。<br>
							HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<>”中包裹的元素名组成，HTML
								标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。然而，习惯上与实践上都推荐将标签名全部小写。<br>
						</font>
					</div>
					<!-- button键颜色弄不一样的 -->
					<h4>点击跳转尝试写代码:
						<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码 》</a></button>
					</h4>
					<div class="bi">
						<img src="./img/笔记图标.png" alt="">
					</div>
					<textarea placeholder="     写笔记..."></textarea>
				</li>
			</div>
			<!-- 2 -->
			<div class="list" id="list2">
				<h1>安装和熟悉开发环境</h1>
				<h3>
					简介： 安装开发环境，并快速熟悉相关的配置、快捷操作、插件安装等。<br>
					目标：学会选择开发工具，安装和配置开发工具，掌握快速熟悉一个工具的方法。<br> 了解常见编辑器，开阔学员视野，提升网络查阅资料的能力。<br>
				</h3>
				<div class="text2">
					1.了解如何搜索前端编辑器相关信息，然后请使用“前端编辑器”、“前端常用编辑器”之类的关键词，搜索当下常用的前端编辑器相关信息。可使用百度baidu.com、bing.com，或者直接在zhihu.com、csdn.net、cnblogs.com等网站搜索，或者问AI。
					如果发现有价值的图文链接，请发出来分享。截止2024年1月，大家可重点了解webstorm、visual studio code。不懂可以观看以下视频。<br>
					<b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1wA411L7SL/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/查阅前端编辑器.jpg" alt="" class="img21">
					</a><br>

					2.下载并安装、配置你选定的开发工具。我们授课使用visual studio code（后续简称为vscode）。<br>

					2.1.（可选）在自己的电脑上安装一个杀毒软件、一个屏幕取词和背单词软件。不懂可以观看以下视频。<br>
					<b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV17f4y1s73N/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/安装开发环境杀毒和屏幕取词.jpg" alt="" class="img21">
					</a><br>

					2.2.从官网下载vscode，注意版本和所使用的系统匹配。不懂可以观看以下视频。<br>
					<b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Xi4y1w7YR/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/下载vscode版本适配安装包.jpg" alt="" class="img21">
					</a><br>

					若要确认windows是64位还是32位的，请搜索关键词“查看电脑系统版本32位还是64位”，参考相关图文。<br>

					2.3.安装vscode， 注意在安装过程选择适当的选项。装完后，安装中文插件，让界面变成中文。不懂可以观看以下视频。<br>
					<b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1E54y1b7G6/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/安装vscode.jpg" alt="" class="img21">
					</a><br>

					2.4.搞清楚vscode insiders版本是怎么回事，有兴趣的同学可以安装。<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi">
					<img src="./img/笔记图标.png" alt="">
				</div>
				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<!-- 3 -->
			<div class="list" id="list3">
				<h1>制作第一张网页</h1>
				<h3>简介： 通过vscode，生成如图所示的网页。网页有标题：某某某的第一张网页。<br>
					目标：掌握快速生成网页骨架的基本方法；掌握网页的基本构成；初步理解从开发到运行的流程。<br></h3>
				<div class="text2">
					创建一个基本的HTML网页通常包括以下步骤：<br>
					1.使用文本编辑器（如Notepad++、Sublime Text、Visual Studio Code等）新建一个文件。<br>
					2.将文件扩展名改为.html或.htm。输入HTML的基本结构，通常包括!DOCTYPE html声明，html元素，head元素和body元素。<br>
					3.在head元素中添加页面的元数据，如title标签。<br>
					4.在body元素中添加页面的可见内容，如h1标签表示标题。<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Yp4y1t7VM/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/创建第一张网页.jpg" alt="" class="img21">
					</a><br>
					1.!DOCTYPE html：文档类型声明，用于通知浏览器使用HTML5的方式解析这个文档。<br>
					2.html：整个网页的开始和结束标签。<br>
					3.head：包含了此网页的元数据，如title、meta、样式链接等。<br>
					4.title：定义网页的标题，显示在浏览器的标题栏上。<br>
					5.body：包含了网页的主要可见部分，如文本、图像、视频等。<br>
					6.在body中，可以使用各种标签来构造内容，如h1定义最大的标题，p定义段落，a定义超链接等。<br>
					总结：这个结构是创建任何HTML页面的起点，随着技术的发展，HTML5 引入了更多的语义标签和功能，<br>
					如视频、音频、Canvas绘图等，以更好地支持现代web应用的需求。<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1LV411H7su/?vd_source=b9e87f37585606041938a579542ed3c5">
						<img src="./image/网页基本结构.jpg" alt="" class="img21">
					</a><br>
					1.!DOCTYPE html：文档类型声明，用于通知浏览器的解析器使用HTML5的方式解析这个文档。<br>
					2.html：根元素，所有HTML页面的内容都会包含在这个元素内部。<br>
					3.head：包含了此网页的元信息，如title、元数据meta、样式link和脚本script等标签。<br>
					4.title：定义了网页的标题，显示在浏览器的标题栏上，也可能显示在书签、历史记录、搜索引擎结果中。<br>
					5.body：包含了用户可见的所有内容，如文本(p标签)、图片(img标签)、视频(video标签)、链接(a标签)等。<br><b>[ 图片可点击 ]</b><br>
					<a
						href="https://www.bilibili.com/video/BV18N4y1A7Ko/?spm_id_from=trigger_reload&vd_source=b9e87f37585606041938a579542ed3c5">
						<img src="./image/网页元素和网页基本结构.jpg" alt="" class="img21">
					</a>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
				</li>

			</div>
			<div class="list" id="list4">
				<h1>制作第二张网页</h1>
				<h3>
					简介： 观摩CSS和JS在网页中是如何工作的。<br>
					目标：了解网页html负责结构、css负责美化、js负责交互的分工。 同时也看到emmet、快捷键、liveserver如何协同工作。<br>
				</h3>
				<div class="text2">
					HTML的快捷键可以极大地提高编写代码的效率。以下是一些常用的HTML快捷键：<br>
					快速复制一行：使用[Ctrl+C](){"sa":"re_dqa_zy","icon":1}然后Ctrl+V，不需要鼠标选中这一行即可复制。<br>
					快速生成HTML代码：在VS Code中，首先建立一个空文档，选择编程语言为HTML；<br>其次，按下! (英文状态下)，再按下Tab键，即可快速生成HTML代码。<br>
					注释：单行注释使用Ctrl+/，注释后再按取消；取消单行注释使用Alt+Shift+A。<br>
					移动行：向上移动一行使用Alt+Up；向下移动一行使用Alt+Down。<br>
					删除当前行：使用Shift + Ctrl + K。<br>
					控制台显示隐藏：使用Ctrl + \~。<br>
					查找文件：使用Ctrl + P。<br>
					代码格式化：使用Shift + Alt + F。<br>
					新建窗口：使用Ctrl + Shift + N。<br>
					竖直的列光标：按住Alt，用鼠标左键点击，可以出现多个光标，输入的代码可以在光标处同时增加。<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV19i4y1w7ee/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/使用快捷键.jpg" alt="" class="img21">
					</a>
					<em>鼠标点击：文件>自动保存</em><br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Zi4y1w7no/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/配置vscode自动保存和格式化文本.jpg" alt="" class="img21">
					</a>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list5">
				<h1>个人简历网页制作</h1>
				<h3>
					简介： 设计个人简历主页，包含内容有个人照片，学习经历，专业特长，兴趣爱好等内容，
					可使用表格，列表，超链接，图片等html元素，
					要求界面设计合理美观，必须在主页上提供代码仓库地址。
				</h3>
				<div class="text2">
					<em>练习Git的使用方法:在码云<a href="https://gitee.com/">https://gitee.com/ </a>
						上注册账号，并在其创建自己的第一个代码仓库，同时与本地代码仓库进行关联。</em><br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Ex411L719/?spm_id_from=333.337.search-card.all.click">
						<img src="./image/个人网页.jpg" alt="" class="img51">
					</a><br>
					内容参考：<br>
					•头像<br>
					•个人基本信息：姓名，性别，出生年月日，手机，邮箱，微信号，出生地<br>
					•教育经历（文本+图片/视频）<br>
					•大学成绩表（表格）<br>
					•项目经验（文本+图片/视频，类似美的官网）<br>
					•工作经历（文本）<br>
					•个人自述（图片、文本、视音频）<br>
					•成长瞬间（图片、视频）<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list6">
				<h1>我的有声像册</h1>
				<h3>
					简介： 本任务要完成的网页分美女、型男、科学家、企业家四个区，点击相应标题可在本页跳转到各区，展现照片，并可播放视频和音频。<br>
					点击照片，则展示大照片，同时亦可播放音频和视频。参考效果图和效果视频（首页效果，详情页效果）。<br>
					【视频勘误。错误：详情页效果解说视频中，说audio是行元素，设长度需要设display:inline-block长度才起作用。正确：无需设置display为inline-block】<br>
					目标：学习img, h1~h6,p, audio,video,a链接,锚点，以多媒体引发兴趣。<br>
				</h3>
				<div class="text2">
					<em><a
							href="https://www.runoob.com/html/html-tutorial.html">学习网址:https://www.runoob.com/html/html-tutorial.html</a></em><br>
					基本做法：用div分成几部分：头部、美女、型男、科学家、企业家、尾部版权信息。<br>
					把标题、视频、音频、图片摆上去。分行可用br标签，横线分隔可用hr标签，标题用h1~h6当中选一个，视频用video，音频用audio，文字段落用p。<br>
					<b>[ 图片可点击 ]</b><br>
					<a
						href="https://www.codelover.club/files/stutasks/userID_18377/currNo_42/lsVfrtf0qO8QSJN0Am3rgSXEgqyx/yousheng.html">
						<img src="./image/我的有声相册.jpg" alt="" class="img21">
					</a><br>
					参考视频：<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Z64y1a7q9/">
						<img src="./image/完整首页.jpg" alt="" class="img21">
					</a><br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list7">
				<h1>学生成绩表</h1>
				<h3>
					简介： 用表格制作成绩表，以及定制任意表格。结果保存备交。<br>
					目标：熟悉表格制作。<br>
				</h3>
				<div class="text2">
					<em>可以参考网站查阅表格形式：
						<a href="http://data.eastmoney.com/center/">东方财富:http://data.eastmoney.com/center/</a>
					</em><br>
					请搜索table标签，制作表格，亦可参考教学视频:<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Vq4y1T7ee/">
						<img src="./image/制作表格.jpg" alt="">
					</a><br>
					<a href="https://www.bilibili.com/video/BV1GP4y1W745/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/制作表格2.jpg" alt="">
					</a><br>
					<a href="https://www.bilibili.com/video/BV1CL41147Zi/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/制作表格3.jpg" alt="">
					</a><br>
					完成表格要求：<br>
					（1）集中：前述三张表格，放在同一张网页中。<br>
					（2）放背景：制作一张淡淡的带有学号、姓名的图，把这个图作为表格的背景，放入前述所做的三张表格中。<br>
					（3）数据居中：让表格中的数据，在格子中全部居中。<br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list8">
				<h1>使用表单</h1>
				<h3>
					简介： 本任务制作表单，用于系统收集用户信息。完成后保存备交。<br>
					目标：熟悉表单常用元素，了解前后台交互基本原理。<br><b>[ 图片可点击 ]</b><br>
				</h3>
				<div class="text2">
					<a href="https://www.bilibili.com/video/BV1qA411c7fE/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/表单.jpg" alt="" class="img51">
					</a><br>
					表单是网页用来收集用户信息、和用户交互的方式。<br>
					属性placeholder、fieldset、optgroup都可以满足某种需求，改进设计。查阅资料，尝试用placeholder达到效果图中的提示。
					<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Ef4y1N7T6/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/表单提交.jpg" alt="" class="img21">
					</a><br>
					设计一张简单的网页，用于学校预约入校。<br>
					收集用户姓名、性别（两个选项：是、否）、手机、身份证号、同行人姓名、车辆号牌、来访日期、来访时间、来访原因（选项：公务、会友、游玩、考试、培训）、其他说明（可用textarea）。<br>
					请查阅资料，选择恰当的标记类型。<br>
					<em>如果不会，可以参考网站：
						<a
							href="https://www.w3school.com.cn/html/html_forms.asp">https://www.w3school.com.cn/html/html_forms.asp</a>
					</em>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list9">
				<h1>拓展视野之html前世今生</h1>
				<h3>
					简介： 查阅资料，全面了解html。<br>
					目标：了解html的来龙去脉，发展历史，当下情况。<br>
				</h3>
				<div class="text2">
					<em>找到并阅读html发展史。请问当前html是什么版本（h5）？和上一个主版本比较（h4），有哪些新发展？<br>
						官方网址为<a href="https://www.w3.org/">https://www.w3.org/</a>
					</em>
					mdn是近似准官方网站，其内容比较权威。<br>
					了解mdn reference:<a href="https://developer.mozilla.org/"> https://developer.mozilla.org/。</a>
					记不住域名，可百度“mdn”。有中文版吗？看到英文网页，如何转换成中文版（假如有的话）
					请进入<a
						href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element</a><br>
					浏览html有哪些元素。
					注意，有些元素是实验性的，还未得到浏览器的广泛支持；有些元素已过时，最好不再使用。<br>
					浏览一下，有个印象就好，不必强记。<br><b>[ 图片可点击 ]</b><br>
					<a href="https://developer.mozilla.org/zh-CN/">
						<img src="./image/MDN官方网站.jpg" alt="" class="img21">
					</a><br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list10">
				<h1>快速了解选择器和盒子模型</h1>
				<h3>
					简介：学习各式选择器、样式表的继承和层叠，以及优先级计算，学习盒子模型。不必太过深入，了解就好。<br>
					目标：进一步了解样式表，了解盒子模型，为后续学习铺个基底。<br>
				</h3><br>
				<em>
					CSS(层叠样式表 Cascading Style Sheets),是定义如何显示HTML元素的样式，语法为：selector {property：value} (选择符 {属性：值})
				</em>
				<div class="text2">
					探究css的继承、层叠和优先级。<br>
					一般而言是这样的：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。<br>
					1）请列出可以继承的属性。<br>
					2）请计算这个选择器的优先级： html body div#first-div[title] .how-much:hover。<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1bq4y1Z715/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/优先级.jpg" alt="" class="img21">
					</a> <br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV18U4y177V1/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/层叠.jpg" alt="" class="img21">
					</a><br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Kv411w7W8/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/继承.jpg" alt="" class="img21">
					</a><br>
					了解盒子模型。
					通过image.baidu.com找出1张最能说明盒子模型的图；设计一张网页，把图放上去，并用css设置图片大小、边框宽度/颜色/线型，内外边距，并在调试窗口查看盒子。
					要求上下左右的边框宽度、颜色、线型都不一样。<br>
					参考网页:<br>
					<a
						href="https://www.codelover.club/files/stutasks/userID_18377/currNo_42/FhD-G6xgQQTMcgldkv_IekGusNhI/box.html">盒子模型:href="https://www.codelover.club/files/stutasks/userID_18377/currNo_42/FhD-G6xgQQTMcgldkv_IekGusNhI/box.html</a>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list11">
				<h1>格式化文本</h1>
				<h3>
					简介： 搜索自己的名字，然后选一段搜索引擎显示的结果，进行格式化。找一段文本，如小说中的一段，对段落进行格式化。<br>
					目标：了解字体原理，了解文本相关的常用格式设置。<br>
				</h3>
				<div class="text2">
					常用的有：颜色color， 文字阴影text-shadow， 文本对齐text-align，行高line-height，<br>
					字母和单词间距letter-spacing/word-spacing，文本缩进text-indent，下划线等修饰text-decoration。<br>
					<b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV19Q4y1C7t6/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/天龙八部.jpg" alt="" class="img21">
					</a><br><br>
					百度一下自己的名字，然后从搜索结果中，选一段合适的，设计网页结构和CSS，重现搜索结果，类似下图。
					<br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Zw411f7EG/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/百度姓名.jpg" alt="" class="img21">
					</a><br><br>
					了解清楚：什么是点阵字体？
					什么是矢量字体？两者在效果呈现上，最大的区别在哪里？
					字体文件中一般包含哪些信息？<br>
					查阅资料，了解：假如本地没有网页指定的字体，浏览器是如何处理的？<br>
					如何把一款字体放在服务器，以便在本地没有时，可以从服务器调用？
					提示：参考@font-face。<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list12">
				<h1>设置颜色和背景</h1>
				<h3>
					简介： 学习颜色知识，在网页上，练习使用颜色和背景，制作多背景五星图、精灵图。<br>
					目标：深入了解和使用颜色及背景，掌握颜色的多种表示方式、单背景和多背景、渐变背景的设置。<br>
				</h3>
				<div class="text2">
					查阅资料（可搜索“css颜色”，初学可阅读w3school或菜鸟教程的内容，扩展视野则可读MDN上的内容。<br>
					如：【使用 CSS 为 HTML 元素应用颜色】），完成以下任务：<br>
					在编辑器中打开网页【color-教学.html】，按网页中的提示进行练习：<br>
					用若干个div的背景色来练习rgb,rgba, #rrggbb, hsl,hsla,以及不透明度opacity。<br>
					连续变化rgba和hsla及opacity的透明度相关参数，感受效果的变化，观察opacity和rgba/hsla的效果区别。<br>
					<em>关于背景，可以参考以下视频：</em><br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV19q4y1T77V/">
						<img src="./image/背景1.jpg" alt="" class="img21">
					</a><br><b>[ 图片可点击 ]</b><br>
					<a href="https://www.bilibili.com/video/BV1Mg411c7xm/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/背景2.jpg" alt="" class="img21">
					</a><br><br>
					背景是CSS中一个重要的部分，它包括了背景颜色、背景图片、背景大小、背景定位等属性。<br>
					通过CSS背景属性，我们可以为网页元素设置丰富多彩的背景效果，从而增强页面的视觉吸引力和用户体验。<br>
					例如：背景属性,说明；<br>
					background， 简写属性，作用是将背景属性设置在一个声明中。<br>
					background-color， 设置元素的背景颜色。<br>
					background-image， 把图像设置为背景。<br>
					background-position， 设置背景图像的起始位置。<br>
					background-repeat， 设置背景图像是否及如何重复。<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="写笔记"></textarea>
			</div>
			<div class="list" id="list13">
				<h1>制作奖状</h1>
				<h3>
					简介： 制作奖状，一等奖、二等奖、三等奖各一份，按序居中显示在一张网页中。<br>
					目标：进一步学习盒子思想，掌握常规文档流的要义，明了外边距折叠，进一步练习所学样式，练习类的运用。<br>
				</h3>
				<div class="text2">
					进一步学习盒子<br>
					查阅学习常规流（normal flow）。<br>
					查阅制作奖状。<br>
					参考视频：<br>
					<a href="//www.bilibili.com/video/BV1Ss4y1s7j6/?spm_id_from=333.337.search-card.all.click">
						【1】https://www.bilibili.com/video/BV1Ss4y1s7j6/?spm_id_from=333.337.search-card.all.click
					</a><br>
					<a
						href="https://www.bilibili.com/video/BV14L411A7G4/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						【2】https://www.bilibili.com/video/BV14L411A7G4/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f
					</a><br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list14">
				<h1>导航菜单制作</h1>
				<h3>
					简介： 参照各企业官网、电商网在采集用户信息时，输入框获得键盘焦点的效果，鼠标悬停在图标或按钮上的效果，自行创意构思自己的效果，实现之。<br>
					目标：进一步练习前面所学，同时学习新知识：outline, box-shadow,transition<br>
				</h3>
				<div class="text2">
					键盘焦点：当光标进入输入框（鼠标点击或Tab键转入），此输入框便可接受键盘输入，即获得了焦点，:focus伪类可用来设置此时的样式。
					鼠标悬停：当鼠标移动到某元素之上停住，此为悬停，便可用:hover来改变此时元素的样式。
					请到天猫、京东，或其他网站，观察用户注册、登录时，光标进入输入框的效果变化。请到天猫、京东、小米等电商网站，观察鼠标悬停在商品卡上的效果变化。
					我们会发现，输入框获得焦点时，一般的变化是背景色(background-color)、边框(border)、轮廓(outline)、不透明度（opacity，或用透明色rgba/hsla）。轮廓效果来自属性（outline,
					outline-color, outline-offset, outline-style, outline-width)，请查阅并快速学一下，看看其可以达成什么效果。
					悬停效果，一般变化是背景色、边框、背景图（bilibili就经常用）、不透明度（opacity）、盒子阴影(box-shadow)、动效(transition)。未学过的知识box-shadow、transition可自行查阅学习。<br>
					<b>[ 图片可点击 ]</b><br>

					<a
						href="https://www.bilibili.com/video/BV1Yo4y1b7Xp/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/过渡.jpg" alt="" class="img21">
					</a><br><b>[ 图片可点击 ]</b><br>
					<a
						href="https://www.bilibili.com/video/BV1ES4y1o77j/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/box-shadow添加阴影.jpg" alt="" class="img21">
					</a><br>
					鼠标悬停或点击，弹出菜单，或者其他内容（这里我们称之为“类菜单”）。<br>
					设计：这种模式的要义，在于先让一块内容不显示，然后鼠标悬停或点击时，显示出来。<br>
					显示时，可伴有动画。
					如何让内容不显示？<br>
					可参考这几个属性：display:none，visibility:hidden, opacity:1, rgba(), hsla()，width:0, height:0等。<br>
					1）查阅资料或参考教学视频（菜单效果，网页结构，样式设计，悬停处理），设计简单的菜单栏和菜单。<br>
					2）学有余力者，完成本练习。<br>
					参考美的官网首页源码，设计并实现美的官网首页这种导航菜单。<br>
					在另一家上市公司环旭电子，我们会看到类似的菜单（https://www.usiglobal.com/cn）。<br>
					（不要完全照官网的来，因为官网常常含有代码，而我们暂无代码，所以只要求效果达成即可）。<br>
					这种菜单非常简洁，有几个明显特征：i）鼠标悬停时，菜单栏项前景色变化，有的会出现底横线；ii）<br>
					动态下拉，横跨整屏；ii）简单地列出菜单项，大字，有的会反白，ii）<br>
					菜单项鼠标悬停时，前景色变化，有的会出现下划线。<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list15">
				<h1>浮动及定位</h1>
				<h3>
					简介： 定位常见应用：菜单、置顶栏、侧边栏、促销标志、购物车等设计与实现。<br>
					目标：学习浮动、定位及其常见应用的设计与实现。<br>
				</h3>
				<div class="text2">
					元素有默认的类型，内联行元素、块元素，或者特性兼而有之。<br>
					但类型表现出来的特性，是可以修改的。可以用display，设定元素的显示类型。<br>
					比如对div，设为inline-block，对span，设为block等。<br>
					如此，实际上设计网页结构时，不必太过在意是行元素还是块元素，因为最后表现出来的类型，大都可以通过display设定。<br>
					分别用span、div、p三种元素，显示20个半径25px的圆，圆内居中显示1~20的数字<br>
					（提示：数字居中，左右居中可用text-align，上下居中可让line-height与文字容器等高，这里是圆的直径），<br>
					背景色偶数用红色，奇数用蓝色（提示：用nth-child选择器），前景用白色，带2像素灰色圆周线，<br>按行显示，一行显示不下，自动向下分行。<br>
					注意，使用class，对这三种元素，复用设置。<br><br>
					<a href="">
						<!-- 参考代码 -->
						<img src="./image/浮动及定位.jpg" alt="" class="img21">
					</a><br>
					参考代码（类设为circle）：<br>
					.circle display: inline-block; <br>
					.circle:nth-child(2n) <br>
					.circle:nth-child(2n+1){ }<br>

					浮动属性（float）让元素脱离常规流（normal flow），而让代码中接下来的元素，环绕浮动元素流动。<br>
					浮动元素，则象小岛一样，浮于水面之上。<br>
					1）探究文字环绕图片。<br>
					查阅资料或参考教学视频（文字环绕1，文字环绕2，文字环绕3，文字环绕4），探究文字环绕图片。<br>
					可看出浮动：i）显示类型为“块”，block。ii）初始紧裹容纳的内容。iii）若内容够长，可能会横跨父元素宽度，所以一般要设一个宽度。<br>
					iv）内外边距生效。v）位置在父元素空间中的左或右，若前一个兄弟元素是块元素，则只能顶在该兄弟元素之下，不可能再往上浮。<br>
					有一个较新的属性shape-outside，可以把文字环绕做得更精致，有兴趣的同学可以查阅资料尝试之。<br>
					2）探究行元素环绕浮动元素。<br>
					假如不是文字，而是内联元素来环绕浮动块，可不可以呢？<br>
					当然是可以的。借助前一引导文的练习结果，可以快速地探索一下。或可参考教学视频（内联元素环绕）。<br>

					<a href="https://www.cnblogs.com/xuzhudong/p/6920190.html">
						<img src="" alt="">可以参考学习页面：https://www.cnblogs.com/xuzhudong/p/6920190.html
					</a><br>

					参考代码：
					div
					<!-- 展示源代码 -->
					span class="front ele"前/span>
					img class="float ele" src=""
					span class="back"后/span
					style
					.ele{ /*把前后内联元素的共性设在这里*/}
					.float{ }
					.front{ }
					.back{ }
					/style
					/div
				</div><br>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list16">
				<h1>图标字体与购物车</h1>
				<h3>
					简介： 实现京东首页显示的购物车。<br>
					目标：掌握图标字体的使用，强化绝对定位的练习。<br>
				</h3>
				<div class="text2">
					查阅京东首页，看看其是怎样实现购物车的。<br>
					提示：1）应该使用一个div来包含整个购物车；<br>
					2）购物车用图标字体，选用购物车图标；<br>
					3）数量显示可用::before或::after伪元素，亦可用div/span/em/i之类，然后display:block;<br>
					position:absolute;，再用top和right定位到右上角。<br>

					推荐网页：<br>
					<a href="https://www.bilibili.com/video/BV1yE411V7uK?spm_id_from=333.337.search-card.all.click">
						1）https://www.bilibili.com/video/BV1yE411V7uK?spm_id_from=333.337.search-card.all.click
					</a><br>
					<a href="https://www.bilibili.com/video/BV1NA411e7kD?spm_id_from=333.337.search-card.all.click">
						2）https://www.bilibili.com/video/BV1NA411e7kD?spm_id_from=333.337.search-card.all.click
					</a>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list17">
				<h1>CSS动画--动感立方体</h1>
				<h3>
					简介： 使用动画，实现旋转立方体等。效果参考视频（立方体效果解说）。<br>
					目标：掌握变换和动画的简单运用。<br>
				</h3>
				<div class="text2">
					<em> 2D变换可参考：https://www.w3school.com.cn/css/css3_2dtransforms.asp</em>
					学有余力的同学可深入理解，可参考张旭鑫个人网站：<br>
					<a
						href="https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/">
						https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
					</a><br>

					3D变换可参考：<br>
					<a href="https://www.w3school.com.cn/css/css3_3dtransforms.asp">
						https://www.w3school.com.cn/css/css3_3dtransforms.asp
					</a><br>
					不要求深入理解，但若想深入，可参考：<br>
					<a href="https://css-tricks.com/how-css-perspective-works/">
						https://css-tricks.com/how-css-perspective-works/
					</a><br>

					查阅以上3D资料时，可能有些地方难以理解，此时可参考以下补充说明：<br>
					1）-ms-，-webkit-，-moz-，-o-厂商前缀：在样式不成熟时，厂家先于标准实现的属性，会打上厂家（或组织）的前缀。<br>示例代码中都有注解，是哪一个浏览器厂商。<br>
					2）transform-origin：用来指定参照原点。默认参照原点是元素的中心点。<br>在变换时，若关系到参照原点，即可用transform-origin让变换来得更便利。<br>
					3）transform-style：指定是否以3D立体透视的方式呈现嵌套元素。<br>
					4）perspective：为了3D透视子元素，设置父元素的perspective，即在z轴上，离z平面的距离，<br>我们可以把自己当作置身此点来看那些子元素。注意，是作用在子元素身上，这和transform:
					perspective()设置的值有区别，<br>用transform设置perspective，是作用于自己的。<br>
					<!-- 俩张图片，不是视频 -->
					<a href="">
						<img src="./image/图片近小远大.jpg" alt="" class="img71">
					</a><br>
					5）perspective-origin：可以这样看，perspective设置了离z平面的距离，默认是在z轴上，现在通过此属性，则可以改变位置。
					<a href="">
						<img src="./image/图片backface.jpg" alt="" class="img51">
					</a><br>
					6）backface-visibility：意即元素的背面要不要可见。<br>因为通过3D旋转等变换，元素的背面可能会出现，那此时该不该显示背面，就由本属性来设置。<br>

					参考代码：<br>
					.side {<br>
					position: absolute;<br>
					width: 100%;<br>
					height: 100%;<br>
					opacity:0.6;<br>
					border: 2px solid white;<br>
					}<br>
					/* 一定要先想好，整个立方体在父元素cube的三维空间中，如何安放，<br>
					然后，就按安放的构想，<br>
					通过旋转、移动等变换，把各个面放到相应的位置上去 。<br>
					有时，需要设置transform-origin来让变换简便。<br>
					*/<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list18">
				<h1>CSS综合任务2---定位与动画</h1>
				<h3>
					简介：内容完整，设计合理美观。<br>
					目标：掌握CSS的定位，浮动布局和动画等基本知识点。<br>
				</h3>
				<div class="text2">
					在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static没有特别的设定，<br>
					遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，<br>
					但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。<br>
					<b>[ 图片可点击 ]</b><br>

					<a href="https://baike.baidu.com/item/CSS%E5%AE%9A%E4%BD%8D/7259464?fr=ge_ala">
						<img src="./image/css定位属性.jpg" alt="" class="img21">
					</a><br>

					css定位知识点:<br>
					CSS定位可以通过position属性来实现，它有四个值：static、relative、absolute和fixed。<br>
					static：默认值，没有定位。<br>
					relative：相对于元素在文档流中的原始位置进行定位。<br>
					absolute：相对于最近的非static定位的父元素进行定位。<br>
					fixed：相对于浏览器窗口进行定位。<br>

					在css中： @keyframes 通过在动画序列中定义关键帧（或waypoints）的样式来控制 CSS 动画序列中的中间步骤。<br>
					和转换 transition 相比，关键帧 keyframes可以控制动画序列的中间步骤。<br><b>[ 图片可点击 ]</b><br>

					<a href="https://www.bilibili.com/video/BV1FJ4m1h7GK/?vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/css动画入门指南.jpg" alt="" class="img21">
					</a><br>
					<em>注意点：<br></em>
					如果一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。<br>
					这可以用来从初始状态开始元素动画，最终返回初始状态。<br>
					如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。<br>
					如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，<br>
					所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。<br>
					如果一个 @keyframes
					内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。<br>
					如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。<br>
					如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。<br>
					如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。<br>
					关键帧中出现的 !important 将会被忽略。
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list19">
				<h1>主流布局--flex布局</h1>
				<h3>
					简介： 探究多列、flexbox和grid布局<br>
					目标：了解新的布局的模式，以便在需要的时候用之。<br>
				</h3>
				<div class="text2">
					<a href="https://blog.csdn.net/qq_46048008/article/details/126406331">
						https://blog.csdn.net/qq_46048008/article/details/126406331
					</a><br>

					可选择两个学习资源学习。<br>
					第一个资源，老师录制的在线课程。<br>
					第二个资源，bilibili和腾讯云上的资源。<br>
					---------------------------------------------------<br>
					第一个资源：通过下面在线课程，掌握Flex布局（by 邹文杰）<br>
					1.Flex布局概述，2.flex-direction属性，3.justify-content属性和align-items属性，<br>
					4.flex-wrap属性和flex-flow属性,5.order属性， 6.flex-grow属性， 7.flex-shrink属性，<br>
					8.flex-basis属性， 9.flex属性， 10.align-self属性,11.Flex布局案例1，<br>
					12.Flex布局案例2-微信聊天界面，13.Flex布局案例3<br>
					------------------------------------------------------<br>
					第二个资源：查阅以下资料，掌握flex布局。<br>
					flex布局动画演示：
					<a
						href="https://www.bilibili.com/video/BV1BR4y1W7P3/?spm_id_from=autoNext">https://www.bilibili.com/video/BV1BR4y1W7P3/?spm_id_from=autoNext</a><br>
					网上有很多资料可用，大家可参阅：
					<a
						href="https://cloud.tencent.com/developer/article/1354252">https://cloud.tencent.com/developer/article/1354252</a>
					跟着学习资料，探究flex布局，<br>
					学有余力，可用flex完成骰子的布局<br><br>

					<a
						href="https://www.bilibili.com/video/BV1A44y1Z7Bp/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/flex布局教程.jpg" alt="" class="img21" </a><br><br>
						<a
							href="https://www.bilibili.com/video/BV1Rv4y177rj/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
							<img src="./image/flex弹性布局.jpg" alt="" class="img21">
						</a><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list20">
				<h1>响应式布局</h1>
				<h3>
					简介： 探究响应式布局、几种典型的布局模板、兼容性、CSS预处理、与UI对接等，<br>
					目标：理解布局的要义，掌握常见布局的方法，了解实际开发中可能遇到的各种问题与解决方案，了解与UI的对接。<br>
				</h3>
				<div class="text2">
					flex布局常常看成是一维布局，在主方向上可以很好的控制，在交叉方向，则跟随主方向。<br>
					grid布局是二维布局，最为强大，但各浏览器对其的支持度不如flex.<br><b>[ 图片可点击 ]</b></em><br>
					<a
						href="https://www.bilibili.com/video/BV18p411A7JB/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/快速掌握grid布局.jpg" alt="" class="img21">
					</a><br>
					（1）把UI设计好的网页图，自上到下，切分成几块，每块一般对应一个div（或者h5的header、footer、section、article等语义元素）。<br>用常规流或grid。<br>
					（2）在每一块中，再自上而下或自左而右（或自右而左）排列元素。用常规流或浮动、flexbox、grid。<br>
					（3）要置顶、置底或侧边不动的，或要重叠在别的元素之上的，用position定位。<br>
					（4）先有html文档结构，然后用css做好样式设定。<br>
					深切理解以上几点，尝试实现以下几种布局。除了传统的常规流+float+position外，亦可分别用flex、grid实现之。<br>

					1）查阅资料，简单学习一下min-width、max-width、@media，了解响应式布局的基本方法，并实现以下网页：<br>
					body上放一个div，设其高度，宽度小于400px时，背景色为灰，宽度在400px到800px之间时，背景色为红，<br>宽度在800px以上时，背景色为蓝。<br>
					2）查阅资料，了解自适应图像。关键字：“设备像素比”、“picture标签”。<br>在1）中，尝试在div中放入一个picture标签，<br>并用source标签、img标签，使用多个图像源。<br>
					查阅资料时，你可能会遇到javascript程序，不懂就忽略。<br>
					也可能遇到需要查阅本机的window.devicePixelRatiowindow、window.width、window.height、document.documentElement.clientWidth等。<br>
					怎么做？按F12进入网页调试界面，进入console，键入相应的指令即可。<br>

					扩展：<br>
					写多了css，就会发现，其中有很多重复的工作。如果把编程的理念用起来，比如，设置变量记录宽度，则只要一改变量，<br>
					所有引用变量的地方，就可以同时改变。如此，css书写的工作效率会大大提高。<br>
					sass就是一个最为著名的解决方案。<br>
					怎么用呢？基本的方法就是，按sass定义的标准写好，然后生成css。<br>
					在vscode中，一个简单的方法是：安装live server插件（这个我们前面一直要求大家安装，并用它来快速同步预览网页），<br>
					再安装一个live sass compiler，则只要写好sass，就可以自动生成css并生效。<br>
				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list21">
				<h1>JavaScript入门</h1>
				<h3>
					简介： 快速学习JavaScript的基本知识点。<br>
					目标：学习JavaScript的基本语法，熟悉基本数据类型，变量的定义和常用的流程控制结构，熟悉JavaScript的基本调试方法。<br>
				</h3>
				<div class="text2">
					JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。<br>
					学习资料：<a
						href="https://www.runoob.com/js/js-tutorial.html">https://www.runoob.com/js/js-tutorial.html</a><br>
					推荐学习视频：<a
						href="https://www.bilibili.com/video/BV1Y84y1L7Nn">https://www.bilibili.com/video/BV1Y84y1L7Nn</a><br>
					请在上述网站中学习JavaScript的基本知识，熟悉基本数据类型，变量定义和常用的流程控制结构，<br>
					了解数组、函数的基本用法，熟悉基于DOM的事件模型，熟悉JavaScript的基本调试方法，了解Promise的使用。<br>
					<b>[ 图片可点击 ]</b><br>

					<a
						href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/js入门必学.jpg" alt="" class="img21">
					</a><br><br>
					<a
						href="https://www.bilibili.com/video/BV1gz421C7yT/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/js简介.jpg" alt="" class="img21">
					</a><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list22">
				<h1>轮播图与待办列表</h1>
				<h3>
					简介： 完成一个简单的交互式待办列表和JavaScript轮播图。<br>
					目标：掌握JavaScript基本编程方法。<br>
				</h3>
				<div class="text2">
					定义一个todolist的数组，数组里包含若干todoitem对象，todoitem对象的属性有id,title,isCompleted。<br>
					给该数组初始化5个元素，并使用列表ul在网页里显示该数组。<br>
					进一步扩展，定义一个todo类，类里包含一个todolist数组的数据属性，同时包含增删改查的方法，在其他代码中使用这个类。<br>

					<!-- 以下内容来自CSDN作者：青青草原小魔王 -->

					一、轮播图介绍<br>
					现在我们在很多网站上都能看到轮播图，像某东、某宝、某猫等等大小型网站上都有应用。下面就是某宝上的轮播图样式。<br>
					二、原理<br>
					将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。<br>
					三、轮播图基本htm布局<br>
					主要就是创建一个大盒子里面存放轮播图的图片标签，cicle标签下的div主要是为后期存放实现图片轮播下面的小圆点。<br>
					四、轮播图CSS布局<br>
					定义全局，消除页面对我们创建CSS布局时的影响。布局全局样式，消除li标签自带小黑点使用定位消除高度塌陷<br>
					设置图片大小，让图片在我们之前设置的边框里。<br>
					定义a标签，生成点击小圆点，产生点击前后效果对比样式。<br>
					五、轮播图JS布局<br>
					首先先获取元素，给父类设置整个图片的宽度，并利用设置好的CSS样式创建底部小圆点。<br>
					设置监听器为点击按钮实现图片的移动，并用获取元素的方法解决点击圆点附近区域跳转的bug事件。<br>
					利用函数和节流阀解决图片在跳转到最后一张图片无法返回第一张图片的问题，节流阀用来解决图片移动出现左右抖动横跳现象，<br>并设置了图片自动播放功能。<br>
					剩下主要用来解决图片左右移动速度和图片移动同时图片下方小圆点同步移动，以及移动过程中小圆点样式的变化。<br>
					<!-- 以下纯图片 -->
					<img src="./image/轮播图js代码（1）.jpg" alt="" class="img21">
					<img src="./image/轮播图js代码（2）.jpg" alt="" class="img21">
					<img src="./image/轮播图js代码（3）.jpg" alt="" class="img21">
					<img src="./image/轮播图js代码（4）.jpg" alt="" class="img21"><br>

					轮播图视频讲解(参考)：<br>
					<b>[ 图片可点击 ]</b>
					<!-- 以下为视频 -->
					<a
						href="https://www.bilibili.com/video/BV1nG411x744/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/轮播图参考视频1.jpg" alt="" class="img21">
					</a><br><br>
					<a
						href="https://www.bilibili.com/video/BV1Kn4y1d73V/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/轮播图参考视频2.jpg" alt="" class="img21">
					</a><br>

					<!-- 以下内容来自©CopyRight 2006-2024 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有 -->
					待办列表介绍：<br>
					在现代的web开发中，待办事项列表是一个常见且实用的功能。它允许用户记录、追踪和完成他们的任务。<br>
					在这篇文章中，我们将使用纯JavaScript来创建一个简单的待办事项列表。我们会涉及到HTML结构的创建、CSS样式的添加<br>以及JavaScript交互的实现。<br>
					步骤1： 创建HTML结构<br>
					首先，我们需要在HTML文件中定义待办事项列表的结构。我们可以使用一个输入框让用户输入任务，一个按钮来添加任务，<br>以及一个无序列表来显示任务。<br>
					步骤2： 添加CSS样式<br>
					接下来，我们可以在一个单独的CSS文件中添加一些样式来美化我们的待办事项列表。例如，我们可以为输入框、按钮和列表项添加样式,<br>
					最后，我们需要在JavaScript文件中编写代码来实现待办事项的添加和显示功能。我们可以通过为按钮添加一个事件监听器来实现这一点，<br>
					当按钮被点击时，获取输入框的值，创建一个新的列表项，并将其添加到列表中。<br>
					<img src="./image/待办列表js参考代码.jpg" alt="" class="img21"><br>

					待办列表js参考视频：<br><b>[ 图片可点击 ]</b>
					<a
						href="https://www.bilibili.com/video/BV18r4y1M7t9/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/待办事项参考视频1.jpg" alt="" class="img21">
					</a><br>
					<a
						href="https://www.bilibili.com/video/BV1Le411M7Ny/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/待办事项参考视频2.jpg" alt="" class="img21">
					</a><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list23">
				<h1>时钟与计算器</h1>
				<h3>
					简介： 参考示例代码，独立完成一个网页时钟和计算器。<br>
					目标：理解JavaScript的编程逻辑<br>
				</h3>
				<div class="text2">
					<!-- 这里来自脚本之家 -->
					制作时钟参考步骤<br>
					1.1 HTML部分<br>
					1.1.1先放在一个容器中clock，存放 用来存放时针、分钟、秒钟的容器<br>
					1.1.2 用来存放时针、分钟、秒钟的容器<br>
					1.1.3 各个时针、分针、秒钟的容器<br>
					1.2 CSS部分<br>
					1.2.1 背景、布局<br>
					1.2.2 设置时钟的外圆边框<br>
					1.2.3 设置存放时分秒的容器<br>
					1.2.4设置时分秒对应的容器<br>
					transform布局的方式<br>
					2、 JS部分<br>
					（1）首先要实现的是获取当前的时间和针<br>
					（2）设置时间的转动<br>
					2.1 先获取每个针<br>
					2.2 时针的指向<br>
					2.2.1 获取当前的时间<br>
					2.2.2 让上面获取的指针等于Data（）的时间<br>
					1.这里要使用到transform:rotate()函数,获得要转动的角度。<br>
					2.由于当前时间的时分秒还没有获取，所以要先获取当前时分秒的时间，当成变量赋值给rotate函数<br>
					3.由于rotate需要获得的是角度而不是时间，所以你需要分别计算出时分秒走动一次需要多少的角度。<br>
					4.完整的赋值<br>
					2.2 设置计时器让他们走动<br>
					2.3 发现问题<br>
					发现分针和时针会等到秒钟走完一圈后才移动一个，我们应该让他缓慢的移动，所以需要在时分后面算上分秒的角度<br>
					*一分钟走60秒，而分针走一小格的角度是6°，所以一度走几秒算出来，单位是度/秒。最后乘以时间，所以单位是度/秒 秒 = 度。<br><br>
					<img src="./image/时钟参考代码1.jpg" alt="" class="img21"><br><br>
					<img src="./image/时钟参考代码2.jpg" alt="" class="img21"><br>

					时钟参考视频：<br><b>[ 图片可点击 ]</b>
					<a
						href="https://www.bilibili.com/video/BV1VY411M7tJ/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/时钟参考视频.jpg" alt="" class="img21">
					</a><br>
					<!-- 来自CSDN作者：花花´◡` -->
					计算器参考思路：<br>
					计算逻辑：<br>
					主要利用弹栈的思想实现：<br>
					定义calculateExpression函数，接受一个表达式作为参数。<br>
					如果表达式中包含了括号，则使用递归的方式处理括号内的子表达式。具体来说，首先找到左括号的位置left和右括号的位置right，<br>
					然后将括号内的子表达式提取出来，并调用自身并传入子表达式作为参数，得到子表达式的计算结果subResult。<br>
					接着，将子表达式的计算结果替换掉原来的子表达式，并继续进行下一轮的计算，直到所有的括号内的子表达式都被计算完。<br>
					定义一个对象operators，存储了不同操作符的优先级。同时，初始化两个栈，operatorStack用于存储操作符，numberStack用于存储操作数。<br>
					遍历表达式中的每个字符，如果遇到的字符不是操作符，则将其添加到number字符串中，表示当前正在读取一个操作数。<br>
					如果遇到操作符，则将之前读取的操作数转换为浮点数并压入numberStack中，并清空number字符串。<br>
					通过比较操作符的优先级，决定是否需要进行计算。如果操作符栈中的栈顶操作符的优先级大于等于当前操作符的优先级，就进行计算。<br>
					计算时会调用calc函数，从numberStack中弹出两个操作数和一个操作符，并根据操作符进行相应的运算，将运算结果压入numberStack中。<br>
					最后，将当前操作符压入operatorStack中。<br>
					完成遍历后，将最后一个操作数转换为浮点数并压入numberStack中。然后，通过循环计算剩余的操作符，直到操作符栈为空。<br>
					返回numberStack中唯一的元素，即为最终的计算结果。<br>
					监听等号按钮的点击事件，在点击时获取输入框中的表达式，调用calculateExpression函数计算结果，并将结果显示在输出框中。<br>
					同时，将表达式和结果添加到历史记录中，并更新历史记录的显示。<br>

					参考网站：
					<a href="https://blog.csdn.net/2202_75550100/article/details/135768248">
						https://blog.csdn.net/2202_75550100/article/details/135768248
					</a><br>


					计算器参考视频：<br><b>[ 图片可点击 ]</b>
					<a
						href="https://www.bilibili.com/video/BV1MJ411773q/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/计算器参考视频.jpg" alt="" class="img21">
					</a><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list24">
				<h1>天气预报</h1>
				<h3>
					简介： 参考示例代码，运用网络公共API获取实时天气，并显示出来<br>
					目标：掌握获取网络请求数据的方法<br>
				</h3>
				<div class="text2">
					<!-- 来自中文网https://www.php.cn/faq/590076.html -->
					基于JavaScript构建实时天气预报应用<br>
					随着科技的发展，天气预报已经成为生活中不可或缺的一部分。而使用JavaScript来构建实时天气预报应用，<br>
					能够方便地获取并展示最新的天气信息。<br>
					本文将介绍如何运用JavaScript来构建一个简单的实时天气预报应用，并附带代码示例。<br>
					首先，我们需要获取天气数据。天气数据可以通过接口来获取，其中一个常用且免费的接口是OpenWeatherMap（https://openweathermap.org/）。<br>
					在该网站上注册并申请API密钥，即可使用其接口来获取实时天气数据。<br>
					下面是获取天气数据的步骤：<br>
					创建HTML文件<br>
					创建一个名为index.html的HTML文件，用于构建天气预报应用的界面。<br>
					在HTML文件的body中添加一个id为"weather-app"的div元素和一个id为"search-form"的form元素，用于展示天气信息和搜索框。<br>
					创建JavaScript文件<br>
					在同目录下创建一个名为app.js的JavaScript文件，用于处理天气数据的获取和展示。<br>
					现在，你已经完成了一个简单的实时天气预报应用。用户可以在搜索框中输入城市名，<br>
					应用将会获取对应城市的天气信息，并在页面上展示出来。<br>
					以上就是利用JavaScript构建实时天气预报应用的步骤。<br>
					通过调用天气接口获取数据，并使用JavaScript来处理和展示数据，我们可以轻松地构建出一个实用的天气预报应用。<br>
					当然，这只是一个简单的例子，你可以根据自己的需求扩展和美化应用的功能和界面。<br>
					<img src="./image/天气预报参考代码.jpg" alt="" class="img21">
					<br><b>[ 图片可点击 ]</b><br>

					<!-- 视频 -->
					<a
						href="https://www.bilibili.com/video/BV14C4y1W7nm/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/天气预报参考视频1.jpg" alt="" class="img21">
					</a><br><br>
					<a
						href="https://www.bilibili.com/video/BV1pk4y1h7Y3/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/天气预报参考视频2.jpg" alt="" class="img21">
					</a><br><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>
			<div class="list" id="list25">
				<h1>网页小游戏</h1>
				<h3>
					简介： 根据给出的示例代码，理解其中的逻辑关系，用自己的代码完成一个网页小游戏，参考示例代码中的飞机大战，像素鸟，记忆游戏。<br>
					目标：深入掌握JavaScript的编程技巧，训练编写完整项目的能力<br>
				</h3>
				<div class="text2">
					创建一个简单的JavaScript小游戏通常包括以下步骤：<br>
					页面布局：设计游戏的HTML结构。<br>
					样式定义：使用CSS为元素添加样式。<br>
					游戏逻辑：使用JavaScript实现游戏的逻辑和行为。<br>
					游戏渲染：使用DOM操作更新游戏的显示状态。<br>
					事件监听：为游戏中的交互点添加事件监听器。<br>

					可以参考以下视频：<br><b>[ 图片可点击 ]</b><br>

					<a
						href="https://www.bilibili.com/video/BV1GF41177Vu/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/贪吃蛇小游戏.jpg" alt="" class="img21">
					</a><br>
					<a
						href="https://www.bilibili.com/video/BV1UL4y1V7wo/?spm_id_from=333.337.search-card.all.click&vd_source=86a7cb754b792201564a527f2ed37f0f">
						<img src="./image/小恐龙跑酷小游戏.jpg" alt="" class="img21">
					</a><br>

				</div>
				<h4>点击跳转尝试写代码:
					<button><a href="https://www.runoob.com/try/try.php?filename=tryhtml_intro">尝试代码》</a></button>
				</h4>
				<div class="bi"><img src="./img/笔记图标.png" alt=""></div>

				<textarea placeholder="   写笔记..."></textarea>
			</div>

		</div>

		<!-- 页脚（含仓库） -->
		<div <!--
			style="text-align: center;background-color:rgb(200, 225, 225);margin-bottom: 0; height: 280px;display: flex;align-items: flex-end;justify-content: center;">
			-->
			<!-- 页脚框架 -->
			<div>
				<div>
					<!-- logo为单独一行 -->
					<div>
						<img style="width: 100px;height: 100px;" src="../兰/images/logo.png" alt="">
					</div>
					<!-- csdn二维码和w3cschool二维码 为一行 -->
					<div>
						<img style="width: 100px;height: 100px;" src="../兰/images/csdn二维码.png" alt="">
						<img style="width: 100px;height: 100px; margin-left: 50px;" src="../兰/images/w3cschool二维码.png"
							alt="">
					</div>
				</div>

				<!-- （一行白字）相关链接、版权声明等 -->
				<div>
					<style>
						a {
							color: black;
						}
					</style>
					<a href="" target="_blank">相关链接</a>
					<a href="" target="_blank">隐私政策</a>
					<a href="" target="_blank">版权声明</a>
					<a href="" target="_blank">反馈箱</a>
					<a href="https://gitee.com/lhuilan/final-group-task/tree/main/" target="_blank">代码仓库</a>
					<a href="../兰/小组.html" target="_blank">关于我们</a>
				</div>

				<!-- 灰白字体 -->
				<div>
					<div>
						&copy; 2024-现在 蓝学网 &nbsp; 网站建设：
						<a href="../兰/小组.html" target="_blank">顺职软件一班第八组</a>
					</div>
					<div>
						网站维护：<a href="../兰/小组.html"
							target="_blank">顺职软件一班第八组</a>&nbsp;&nbsp;&nbsp;联系方式：lanxuewang@qq.com
					</div>
				</div>
			</div>
		</div>

		<script src="hcj.js"></script>
		<script>
			const menuItems = document.querySelectorAll('.menu-item');
			const items = document.querySelectorAll('.list');


			menuItems.forEach(function (item, index) {
				console.log(item, index);
				item.addEventListener('click', function () {
					// 移除所有栏目的 active 类
					menuItems.forEach(function (item) {
						item.classList.remove('active');
					});
					// 移除所有内容区域的 active 类
					items.forEach(function (item) {
						item.classList.remove('active');
					});
					// 给被点击的栏目添加 active 类
					item.classList.add('active');
					// 显示对应的内容区域
					items[index].classList.add('active');
				});
				if (index === 0) {
					menuItems[0].classList.add('active');
					items[0].classList.add('active');
				}
			});
		</script>
		<script src="../哲/搜索三.js"></script>
</body>

</html>